<template>
  <el-card>
    <el-card
      style="width: 17%;height:120px;display: inline-block;margin-left: 50px;margin-top: 10px;padding-left: 20px"
    >
      <el-text class="mx-1" size="large" style="font-weight: bold">
        盈利金额
      </el-text>
    </el-card>
    <el-card
      style="width: 17%;height:120px;display: inline-block;margin-top: 10px;padding-left: 20px"
    >
      <el-text class="mx-1" size="large" style="font-weight: bold">
        近期成交数量
      </el-text>
      <br />
      <div style="height: 8px;"></div>
      <el-text
        class="mx-1"
        size="large"
        style="font-size: 17px;font-weight: lighter;"
      >
        {{ nan }}
      </el-text>
    </el-card>
    <el-card
      style="width: 17%;height:120px;display: inline-block;margin-top: 10px;padding-left: 20px"
    >
      <el-text class="mx-1" size="large" style="font-weight: bold">
        平均销量
      </el-text>
      <div style="height: 8px;"></div>
      <el-text
        class="mx-1"
        size="large"
        style="font-size: 17px;font-weight: lighter;"
      >
        {{ num }}
      </el-text>
    </el-card>
    <el-card
      style="width: 17%;height:120px;display: inline-block;margin-top: 10px;padding-left: 20px"
    >
      <el-text class="mx-1" size="large" style="font-weight: bold">
        剩余可用电池
      </el-text>
    </el-card>
    <el-card
      style="width: 17%;height:120px;display: inline-block;margin-top: 10px;padding-left: 20px"
    >
      <el-text class="mx-1" size="lar ge" style="font-weight: bold">
        收藏站点人数
      </el-text>
    </el-card>
    <br />
    <el-text
      class="mx-1"
      size="lar ge"
      style="font-weight: bold;display: inline-block;margin-left: 55px;margin-top:20px;"
    >
      <h3>近期数据统计</h3>
    </el-text>
    <div ref="main" style="width: 100%;height: 600px;"></div>
  </el-card>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
const nan = ref(0)
const num = ref(0)
let main = ref(null)
onMounted(() => {
  var myChart = echarts.init(main.value)
  var option

  option = {
    xAxis: {
      type: 'category',
      data: [
        '2024-9-1',
        '2024-9-2',
        '2024-9-3',
        '2024-9-4',
        '2024-9-5',
        '2024-9-6',
        '2024-9-7',
      ],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1400],
        type: 'line',
        smooth: true,
      },
    ],
  }

  option && myChart.setOption(option)
  console.log(option.series[0].data)
  option.series[0].data.forEach(even => {
    num.value += even
  })
  nan.value = num.value
  console.log(num.value / option.series[0].data.length)
})
</script>

<style scoped></style>
